<template>
	<view class="doctorCenter row">
		<view class="attestationList">
			<van-tabs :active="active" color="#02BF88" sticky animated swipeable :z-index="99999990" @change="onChange">
				<van-tab title="待领取">
					 <view class="listBox" v-if="dataList.length">
						 <view class="list" v-for="(item,index) in dataList" :key="item.id">
							<view class="content"  @click="fillIn(item.id,'authenticate',2)">
								<text class="c_title">{{ $replaceLastStr(item.title) }}</text>
								<text class="c_cont">{{ item.gmtCreate }}</text>
							</view>
							<!-- <view class="appraising">上鉴定会</view> -->
							<view class="getBtn">
								<van-button class="button" round type="primary" @click="receive(item,index)">领取</van-button>
							</view>
						 </view>
					 </view>
					 <view v-else class="noData">
						<view class="text">暂无可领取的案例</view>
					 </view>
				 <view class="loading" v-show="isShowMore && dataList.length">没有更多数据了~</view>
				</van-tab>
				<!-- 待核实 -->
				<van-tab title="待核实">
					 <view class="listBox" v-if="dataList.length">
						 <view class="list" v-for="(item,index) in dataList" :key="item.id">
							<view class="content"  @click="fillIn(item.id,'authenticate',2)">
								<text class="c_title">{{ $replaceLastStr(item.title) }}</text>
								<text class="c_cont">{{ item.gmtCreate }}</text>
							</view>
							<!-- <view class="appraising">上鉴定会</view> -->
							<view class="getBtn">
								<van-button class="button" round type="primary" @click="fillIn(item.id,'authenticate', 1)">去核实</van-button>
							</view>
						 </view>
					 </view>
					 <view v-else class="noData">
						<view class="text">暂无待核实的案例</view>
					 </view>
				 <view class="loading" v-show="isShowMore && dataList.length">没有更多数据了~</view>
				</van-tab>
				
				 <van-tab title="待鉴定">
					<view class="listBox" v-if="dataList.length">
						<view class="list" v-for="(item,index) in dataList" :key="item.id">
							<view class="content">
								<text class="c_title">{{ item.title }}</text>
								<rich-text class="richText" :nodes="item.content"></rich-text>
								<text class="c_cont">{{ item.gmtCreate }}</text>
							</view>
							<view class="getBtn">
								<van-button class="button" round type="primary" @click="fillIn(item.id,'apply', 3)">报名</van-button>
							</view>
						</view>
					</view>
					<view v-else class="noData">
						<view class="text">目前暂无鉴定会通知，敬请关注。</view>
					</view>
					<view class="loading" v-show="isShowMore && dataList.length">没有更多数据了~</view>
				 </van-tab>
				 <van-tab title="已完成">
						<view class="listBox" v-if="helpList.length">
							<view class="list" v-for="(item,index) in helpList" :key="item.id">
								<view class="content" @click="fillIn(item,'reply',2)">
									<text class="c_title">{{ $replaceLastStr(item.title) }}</text>
									<text class="c_cont">{{ item.address }}</text>
								</view>
								<view class="appraising" :class="item.status == 10 ? 'besidesColor':''">{{ item.status == 10 ? '已发布' : '不发布' }}</view>
							</view>
						</view>
						<view v-else class="noData">
							<view class="text">暂无已完成的案例</view>
						</view>
						<view class="loading" v-show="isShowMore && dataList.length">没有更多数据了~</view>
				 </van-tab>
			</van-tabs>
		</view>
		<van-toast id='van-toast'/>
	</view>
</template>

<script>
import { getByOwn, unclaimedList, auditList, verifyList, finishedList, seekHelpList, caseAppraisalAdd } from '@/api/my'
import { meetingList } from '@/api/home'
	export default {
		name: 'doctorCenter',
		data() {
			return {
				attestationStatus: '0',
				active: 0,
				dataInfo: {},
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				total: 0,
				dataList: []
			}
		},
		onShow() {
			this.getUsrInfo();
		},
		onPullDownRefresh() {
			this.pagination.pageNum = 1;
			setTimeout(() => {
				this.getList();
			}, 200)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1300);
		},
		onReachBottom() {
			if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total) {
				return
			}
			this.pagination.pageNum ++;
			this.getList('more')
		},
		computed: {
			isShowMore() {
				if ((this.pagination.pageSize * this.pagination.pageNum) >= this.total && this.total!=0) {
					return true
				} else {
					return false
				}
			},
			helpList() {
				let diseaseList = this.$storage.getItem('diseaseList');
				if (this.dataList && diseaseList) {
					this.dataList.map(item => {
						diseaseList.map(el => {
							if (item.diseaseId == el.id) {
								this.$set(item, 'diseaseName', el.name)
							}
						})
					})
					return this.dataList
				}
			}
		},
		methods: {
			getUsrInfo() {
				getByOwn().then(res => {
					if (res.data) {
						let storge = this.$storage.getItem('roleDataInfo');
						if (res.data.type !== 2) {
							this.attestationStatus = res.data.status;
						} else {
							this.attestationStatus = 0
						}
						this.dataInfo = {
							...storge,
							...res.data,
							type: '3'
						}
						this.reset(res.data.status,res.data.type);
					}
				})
			},
			fillIn(val=1,mode,status=1) {
				if (mode == 'authenticate') {
					uni.navigateTo({
						url: `../volunteerCenter/authenticate?id=${val}&status=${status}`
					})
				}else if(mode == 'reply') {
					uni.navigateTo({
						url: `../myCase/detail?id=${val.id}&isComment=true`
					})
				}else if(mode == 'apply') {
					uni.navigateTo({
						url:`/packageA/pages/applyList/index?id=${val}`
					})
				} else {
					uni.navigateTo({
						url: `../personal/index?id=${val}`
					})
				}
			},
			// 选择nav
			onChange(e) {
				this.active = e.detail.name;
				this.reset(this.attestationStatus,3)
			},
			// 获取分页列表
			getList(mode) {
				if (this.active == 0) {
					unclaimedList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if(this.active == 1)  {
					auditList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if(this.active == 2){
					meetingList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				} else if (this.active == 3) {
					finishedList({...this.pagination}).then(res => {
						if (mode == 'more') {
							this.dataList = this.dataList.concat(res.data.rows);
						} else {
							this.dataList = res.data.rows;
						}
						this.total = res.data.total;
					})
				}
			},
			//清空重置
			reset(status,type) {
				this.dataList = [];
				this.pagination = {
					pageSize: 10,
					pageNum: 1
				};
				this.total = 0;
				// if(status == 10 && type == 3) {
					this.getList()
				// }
			},
			//领取
			receive(val,index) {
				this.$showModal({
					title: '提示',
					content: '领取成功将进入待核实阶段，确认领取吗？',
					showCancel: true,
				}, (res) => {
					caseAppraisalAdd({ caseId: val.id }).then(res => {
						uni.showToast({
							title: '领取成功',
							duration: 2000,
							icon: 'success'
						});
						this.dataList.splice(index, 1);
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doctorCenter {
		width: 100%;
		position: relative;
		background-color: #F5F5F5;
		box-sizing: border-box;
		min-height: 100vh;
		.attestationList {
			.listBox {
				padding: 0 32rpx;
			}
			.list {
				padding: 24rpx 16rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20px;
				position: relative;
				.content {
					display: flex;
					flex-direction: column;
					.c_title {
						color: #333333;
						font-size: 32rpx;
					}
					.richText {
						color: #444444;
						font-size: 30rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-top: 14rpx;
					}
					.c_cont {
						color: #666666;
						font-size: 28rpx;
						margin-top: 14rpx;
					}
				}
				.getBtn {
					width: 100rpx;
					position: relative;
					position: absolute;
					bottom: 24rpx;
					right: 16rpx;
					.button {
						width: 104rpx;
						height: 48rpx;
						font-size: 24rpx;
						/deep/ .van-button--normal {
							color: #FFFFFF;
							width: 100%;
							height: 100%;
							padding: 0 0;
							font-size: 24rpx;
							font-weight: 200;
						}
					}
				}
				.appraising {
					position: absolute;
					right: 0;
					top: 0;
					width: 130rpx;
					height: 40rpx;
					background-color: #FBA517;
					line-height: 40rpx;
					text-align: center;
					border-radius: 0rpx 20rpx 0 20rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					&.besidesColor {
						background-color: #02BF88;
					}
				}
			}
			/deep/ .van-tabs__wrap {
				height: 80rpx;
				.van-tabs__scroll {
					margin: 0;
					height: 100%;
					.van-tabs__nav {
						height: 100%;
						border-color: #9BCDAF;
						.van-ellipsis {
							line-height: 80rpx;
						}
					}
				}
			}
		}
	}
</style>
